import type { ProFormInstance } from '@ant-design/pro-components';
import { ProForm, ProFormText } from '@ant-design/pro-components';
import {Row,Col, Button, Image, Badge} from 'antd'
import {isEmpty, isNil} from 'lodash';
import {GetUserDetailsRequest,UserInfoSaveRequest} from "@/pages/Dashboard/System/User/service";
import { GetUserDetailsResponse,UserInfoSaveRequestParams} from '../data';
import {useEffect, useState} from "react";
import {Link, useParams} from "umi";
import {useModel} from "@@/plugin-model/useModel";
import {history} from "@@/core/history";
import { Typography } from 'antd';
import { useRef } from 'react';
const { Title } = Typography;
const UserDetail = () => {
    //todo: 获取地址栏参数
    //获取地址栏参数
    const {
        id,
    }: {
        id:string;//路由上的知识ID
    } = useParams();
    const { query = {},pathname} = history.location;
    const { redirect } = query as { redirect: string };
    const [ data,setData ] = useState<GetUserDetailsResponse>();
    const [ loading,setLoading ] = useState(false);
    const { initialState } = useModel('@@initialState');
    const formRef = useRef<ProFormInstance>();

    
    //组件初始化函数
    //todo: useEffect
    useEffect(()=>{
        if(id){
            GetUserDetails(id);
        }
    },[id,query])


    //根据用户ID获取用户详情
    //todo: GetUserDetails
    const GetUserDetails = async (id:string) => {
        setLoading(true);
        try {
            const res:AircasKB.ResponseType<GetUserDetailsResponse> = await GetUserDetailsRequest({
                userId:id
            })
            if(res.code == 200){
                setData(res.data);
                formRef.current?.setFieldsValue(res.data)
            }
            setLoading(false);
        }
        catch (e) {
            setLoading(false);
        }
    }
    //保存用户信息
    const handleSubmit = (e:any) =>{
        formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
            setLoading(true);
            const requestParams:UserInfoSaveRequestParams = {
               id: id,
               sex:val.sex,
               loginName: val.loginName,
               nickName:val.nickName,
               email:val.email,
               mobile:val.mobile,
               loginDate:val.loginDate
            }
            UserInfoSaveRequest(requestParams).then(res => {
                if(res.code == 200){
                    setLoading(false);
                }
                else{
                    setLoading(false);
                }
            });
        });
    }
    return (
        <div>
            <ProForm
                formRef={formRef}
                submitter={{
                    // 配置按钮文本
                    // searchConfig: {
                    //   resetText: '重置',
                    //   submitText: '提交',
                    // },
                    // // 配置按钮的属性
                    // resetButtonProps: {
                    //   style: {
                    //     // 隐藏重置按钮
                    //     display: 'none',
                    //   },
                    // },
                    // submitButtonProps: {
                    //     style: {
                    //         // 隐藏重置按钮
                    //         display: 'none',
                    //     }
                    // },
                
                    // 完全自定义整个区域
                    render: (props, doms) => {
                    //   console.log(props);
                      return [
                        // <Button type="primary" key="delete" onClick={handleSubmit}>
                        //   删除
                        // </Button>,
                        <Button key="submit">
                          禁用
                        </Button>,
                      ];
                    },
                  }}
            >
            <Row gutter={100}>
                <Col span={6}>
                    <ProFormText
                        width="md"
                        name="nickName"
                        label="姓名"
                    />
                    <ProFormText
                        width="md"
                        name="loginName"
                        label="登录名"
                    />
                    <ProFormText width="md" name="sex" label="性别" />
                    <ProFormText
                        name='officeName'
                        width="md"
                        label="单位/部门"
                    />
                    <ProFormText
                        name='mobile'
                        width="md"
                        label="联系电话"
                    />
                     <ProFormText
                        name='email'
                        width="md"
                        label="邮箱"
                    />
                    <ProFormText
                        name='loginDate'
                        width="md"
                        label="最后登录日期"
                    />
                </Col>
                <Col span={6}>
                    <Row style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
                        <Image
                            width={120}
                            style={{ borderRadius: '50%' }}
                            preview={false}
                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        />
                        <div style={{marginTop: '10px'}}>
                        <Title level={5}>{data?.nickName}</Title>
                        </div>
                    </Row>
                    <Row style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
                        <div style={{marginBottom:'10px'}}>
                            <span style={{display:'inline-block',width:'100px'}}>知识生产者</span>
                            <Button type="primary" size="small" style={{width:'100px'}}>切换角色</Button>
                        </div>
                        <div>
                        {/* success | processing | default | error | warning */}
                            <span style={{display:'inline-block',width:'100px'}}>
                                <Badge status="processing" text="待审核" />
                            </span>
                            <Button type="primary" size='small' style={{width:'100px'}}>审核</Button>
                        </div>
                    </Row>
                </Col>
            </Row>
        </ProForm>
            
        </div>
    );
};

export default UserDetail;
